<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<!-- #ifdef H5-->
		<Top :config="config"></Top>
		<!-- #endif -->
		<view class="main-section top tabbar-bottom">
			<view class="cover">
				<image mode="widthFix" :src="data.cover_800" class="image"></image>
			</view>

			<view class="base-info">
				<view class="title">
					{{data.title}}
				</view>
				<view class="description">
					{{data.description}}
				</view>
				<view class="price" v-if="data.price==0">
					免费
				</view>
				<view class="price" :class="!showSale?'hidden':''" v-else>
					￥ {{data.price}}
				</view>
				<view class="data-info">
					<view class="marking-price" :class="!showSale?'hidden':''">
						￥ {{data.marking_price}}
					</view>
					<view class="exp-info">
						<view class="item view">
							<uni-icons type="eye" size="10" color="#999"></uni-icons> 
							<text class="num">{{data.handling_view}}</text>
						</view>
						<view class="item sales">
							<uni-icons type="cart-filled" size="10" color="#999"></uni-icons> 
							<text class="num">{{data.handling_sales}}</text>
						</view>
						<view class="item favorites">
							<uni-icons type="star" size="10" color="#999"></uni-icons> 
							<text class="num">{{data.handling_sales}}</text>
						</view>
					</view>
				</view>
				<view class="tabs">
					<view v-if="data.only_member == 1" class="item only-member">会员专享</view>
					<view v-if="data.score > 0" class="item score">返还积分</view>
				</view>
			</view>
			
			<!--支持的会员卡-->
			<template v-if="!loading && data.support_member_cards!==undefined && data.support_member_cards.length > 0 && showSale">
				<SupportMemberCards :cardsData="data.support_member_cards" />
			</template>
			<!--评价功能-->
			<template v-if="!loading">
				<Evaluate type="ExamPaper" :typeId="Number(data.id)" />
			</template>
			<!--教师显示块-->
			<template v-if="data.teacher && data.teacher_id > 0">
				<Teacher :teacherId="Number(data.teacher_id)" :teacherData="data.teacher" />
			</template>
			<!--课程详情块-->
			<view class="detail">
				<view class="tab">
					<view class="tab-item tab-content" :class="[detailShow == 'content'?'active':'',data.lessons_list !== undefined && data.lessons_list.length > 0?'':'only']" @click="toggleDetailShow('content')">
						详情
					</view>
				</view>
				<view class="content" :class="detailShow == 'content'?'':'hidden'">
					<!--购买后自定义描述-->
					<view class="custom-desc" v-if="data.purchase == 1 || data.can_be_used_card!=undefined && data.can_be_used_card.member_card_info.discount == 0">
						<rich-text selectable="true" :nodes="util.formatRichText(data.custom_desc)"></rich-text>
					</view>
					<!--完整描述-->
					<view class="all-content">
						<rich-text :nodes="util.formatRichText(data.content)"></rich-text>
					</view>
					
					<!--问答-->
					<template v-if="!loading">
						<Questions type="ExamPaper" :typeId="Number(data.id)" />
					</template>
					<CopyRight :config="config" />
				</view>
			</view>
		</view>
		<template v-if="!loading && config">
			<SaleBar type="ExamPaper" @getData="getData" :data="data" :config="config" />
		</template>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '@/components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import SaleBar from '../../common/saleBar.vue'
	import SupportMemberCards from '../../common/supportMemberCards.vue'
	import Teacher from '../../common/teacher.vue'
	import Evaluate from '../../common/evaluate.vue'
	import Questions from '../../common/questions.vue'
	import CopyRight from '../../common/copyRight.vue' //自定义版权
	import Top from '../../common/top.vue'
	
	export default {
		
		components: {
			FullscreenLoading,
			SaleBar,
			SupportMemberCards,
			Teacher,
			Evaluate,
			Questions,
			CopyRight,
			Top,
		},
		data() {
			return {
				loading: true, //加载中
				urlParams: {},
				userInfo : {}, //用户数据
				data: {},
				nodes: [{
					name: 'div',
					attrs: {
						class: 'div-class',
						style: 'line-height: 60px; color: red; text-align:center;'
					},
					children: [{
						type: 'text',
						text: 'Hello&nbsp;uni-app!'
					}]
				}],
				detailShow: 'content', //内容区默认显示课程详情 string content:课程详情 list:系列课目录
				showSale: this.util.setShowSale(),
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    //console.log(option); //打印出上个页面传递的参数。
			this.urlParams = option
			//通过小程序码进入的获取参数
			if(option.scene){
				// options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				let scene = decodeURIComponent(option.scene); 
				let obj = {};
				for (var i = 0; i < scene.split('*').length;i++){
				  var arr = scene.split('*')[i].split('/');
				  obj[arr[0]] = arr[1];
				}
			
				this.urlParams.id = obj.id
				this.urlParams.promoter_uid = obj.u
				//console.log(this.urlParams,'scene')
			}
			
			if(this.urlParams.promoter_uid){
				uni.setStorageSync('promoter_uid',this.urlParams.promoter_uid)
			}
			
			Promise.all([this.getData()]).then(res => {
				// H5端分享设置
				//#ifdef H5
				let url = window.location.href
				let shareData = {
					title : this.data.title,
					desc : this.data.description,
					img: this.data.cover_200
				}
				this.wechat.share(shareData,url);
				//#endif
				//加载完成
				this.loading = false
			})
		},
		created() {
			//获取已登录用户数据
			this.getUserInfo()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			/**
			 * 获取课程详情数据
			 */
			getData: function(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'detail'
						data.m = 'muu_classroom'
						data.id = params.id
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/exam'
						//#endif
						//#ifdef H5
						url = 'entry/site/paper'
						data.m = 'muu_classroom_plugin_exam'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								uni.setNavigationBarTitle({
								　　title:res.data.data.title
								})
							}
							resolve(res.data)
						}
					})
				})
				
			},
			
			/**
			 * 显示隐藏详情或目录
			 * @param {Object} value
			 */
			toggleDetailShow: function(value){
				if(value == 'content'){
					this.detailShow = 'content'
				}else{
					this.detailShow = 'list'
					this.getKnowledgeList(1)
				}
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
			},
		},
		onReachBottom() {
			console.log('页面滚动到底部')
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			// 分享(分销)用户ID
			let userInfo = this.userInfo.memberInfo || {}
			let url = '/muu_classroom/pages/exam/paper/detail?' + 'id=' + this.data.id
			if(userInfo.hasOwnProperty("uid") && userInfo.uid !== undefined){
				url = url + '&promoter_uid=' + userInfo.uid
			}
			let share = {
				title : this.data.title,
				path : url,
				desc : this.data.description,
				success : function(){
					
				},
			}
			
			return share
		},
		/**
		 * 监听用户点击右上角转发到朋友圈
		 */
		onShareTimeline() {
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	
	.cover {
		position: relative;
		width: 100%;
		image {
			width: 100%;
			display: block;
		}
	}
	.base-info {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #000;
		}
		.description {
			font-size: 28rpx;
			color: #999;
		}
		.price {
			font-size: 36rpx;
			font-weight: 500;
			color: red;
			margin: 20rpx 0 10rpx 0;
		}
		.data-info {
			display: flex;
			.marking-price {
				font-size: 28rpx;
				color: #999;
				text-decoration: line-through;
				width: 30%;
			}
			.exp-info {
				flex: 1;
				width: 70%;
				text-align: right;
				.item {
					display: inline-block;
					color: #999;
					margin: 0 10rpx;
					font-size: 24rpx;
					.num {
						margin-left: 10rpx;
					}
				}
			}
		}
	}
	
	.detail {
		.tab {
			display: flex;
			padding: 10rpx 0;
			padding: 0 20rpx 0 20rpx;
			background-color: #fff;
			.tab-item {
				flex: 1;
				text-align: center;
				line-height: 72rpx;
				padding-bottom: 8rpx;
			}
			.tab-item.only {
				flex: none;
				text-align: left;
			}
			.tab-content {
				
			}
			.tab-list {
				
			}
			.active {
				position: relative;
				&:before {
					position: absolute;
					right: 30%;
					left: 30%;
					bottom: 0;
					height: 8rpx;
					content: '';
					-webkit-transform: scaleY(.5);
					transform: scaleY(.5);
					background-color: #03b8cf;
				}
			}
		}
		//详情
		.content {
			
			.try-content {
				margin-bottom: 16rpx;
				padding: 20rpx;
				background-color: #fff;
			}
			.custom-desc {
				margin-bottom: 0;
				padding: 20rpx;
				background-color: #fff;
			}
			.all-content {
				margin-bottom: 16rpx;
				padding: 20rpx;
				background-color: #fff;
			}
		}
		
		.list {
			background-color: #fff;
			.lessons {
				background-color: #fff;
				.item {
					padding: 20rpx;
					margin-bottom: 20rpx;
					.start_time {
						font-size: 24rpx;
						color: #999;
					}
					.title {
						font-size: 28rpx;
						color: #333;
						font-weight: 600;
					}
				}
			}
		}
	}

</style>
